import React, { useEffect, useState } from 'react';
import { FormOutlined, TagOutlined, PlusOutlined, DeleteOutlined, RollbackOutlined, SearchOutlined } from '@ant-design/icons'
import { Divider, Button, Form, Input, Select, Modal, notification } from 'antd'
import CustomTable from '../../../../components/ccl/CustomTable';
import './index.scss'
import { useNavigate } from 'react-router-dom';
import * as service from '../../../../api/ccl';
const { Option } = Select;
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 20 },
};



const AddPack = () => {
    const [form] = Form.useForm();
    const history = useNavigate()
    const [data, setData] = useState([])
    const [packlist, setPackList] = useState([])
    const [huix, setHuix] = useState({})
    const [isModalOpen, setIsModalOpen] = useState(false);

    useEffect(() => {
        packList()
        selectpack()
    }, [])
    const packList = async () => {
        const res = await service.selectpack({ page: 1, limit: 3 })

        if (res.data.code == 200) {
            setData(res.data.data.records)
        }
    }
    const onFinish = async (values: any) => {
        const res = await service.pack_insertpack(values)
        if (res.data.code == 200) {


            notification.success({ message: '添加成功', duration: 2 })
            var newList = JSON.parse(JSON.stringify(packlist))
            newList.push(values)
            setPackList(newList)
        }

    };
    const selectpack = async () => {
        const res = await service.pack_add_insertpack({ page: 1, limit: 10 })
        if (res.data.code == 200) {
            setPackList(res.data.data.records)
        }

    }
    // 提交
    const onReset = () => {
        history(-1)
    };

    // 删除

    // 关闭弹窗
    const handleOk = () => {
        setIsModalOpen(false);
    };
    // 关闭弹窗
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 打开弹框
    const showModal = (record: any, index: any) => {
        setIsModalOpen(true)
        setHuix(record)
    }

    const clumns: any = [
        {
            title: '序号',
            key: 'index',
            render: (_: any, __: any, index: any) => index + 1,
        },
        {
            title: '单号',
            key: 'packWaybill',
            dataIndex: 'packWaybill',
        },
        {
            title: '客户',
            key: 'packCustomer',
            dataIndex: 'packCustomer',
        },
        {
            title: '部门',
            key: 'packDepartment',
            dataIndex: 'packDepartment',
        },
        {
            title: '状态',
            key: 'packStatus',
            dataIndex: 'packStatus',
            filters: [
                {
                    text: '编辑',
                    value: '编辑',
                },
                {
                    text: '待审核',
                    value: '待审核',

                },
                {
                    text: '已确认',
                    value: '已确认',

                },
                {
                    text: '进行中',
                    value: '进行中',

                },
                {
                    text: '已完成',
                    value: '已完成',

                },
            ],
            filterMode: 'tree',
            filterSearch: true,
            onFilter: (value: string, record: any) => record.packStatus.indexOf(value) === 0,
        },
        {
            title: '成色',
            key: 'packColor',
            dataIndex: 'packColor',
        },
        {
            title: '重量',
            key: 'packWeight',
            dataIndex: 'packWeight',
        },
        {
            title: '数量',
            key: 'packNum',
            dataIndex: 'packNum',
        },
        {
            title: '制单时间',
            key: 'packTime',
            dataIndex: 'packTime',
        },
    ]
    const columns2 = [
        {
            title: '单号',
            key: 'packWaybill',
            dataIndex: 'packWaybill',
        },
        {
            title: '客户名称',
            key: 'packCustomer',
            dataIndex: 'packCustomer',
        },
        {
            title: '条码',
            key: 'packCode',
            dataIndex: 'packCode',
        },
        {
            title: '仓库',
            key: 'packDepartment',
            dataIndex: 'packDepartment',
        },
        {
            title: '成色',
            key: 'packColor',
            dataIndex: 'packColor',
        },
        {
            title: '重量(g)',
            key: 'packWeight',
            dataIndex: 'packWeight',
        },
        {
            title: '数量',
            key: 'packNum',
            dataIndex: 'packNum',
        },
        {
            title: '附加供费',
            key: 'packCost',
            dataIndex: 'packCost',
        },
        {
            title: '操作',
            key: 'proname',
            dataIndex: 'proname',
            render: (record: any, index: any) => (
                <div className='caoz'>
                    <TagOutlined />
                    <RollbackOutlined />
                    <SearchOutlined onClick={() => { showModal(record, index) }} />
                </div>
            )
        },
    ]
    let newData = data.map((item: any, index: any) => ({
        key: index,
        index: item.packId,
        packCode: item.packCode,
        packColor: item.packColor,
        packCost: item.packCost,
        packCustomer: item.packCustomer,
        packDepartment: item.packDepartment,
        packNum: item.packNum,
        packProname: item.packProname,
        packStatus: item.packStatus,
        packTime: item.packTime,
        packType: item.packType,
        packWaybill: item.packWaybill,
        packWeight: item.packWeight
    }))
    let newProlist = packlist.map((item: any, index: any) => ({
        key: index,
        index: item.packId,
        packCode: item.packCode,
        packColor: item.packColor,
        packCost: item.packCost,
        packCustomer: item.packCustomer,
        packDepartment: item.packDepartment,
        packNum: item.packNum,
        packProname: item.packProname,
        packStatus: item.packStatus,
        packTime: item.packTime,
        packType: item.packType,
        packWaybill: item.packWaybill,
        packWeight: item.packWeight
    }))
    return (
        <div className='addpack'>
            <div className="header">
                <h3>新增打包单</h3>
                <div className="right">
                    <Button type="primary" htmlType="button" onClick={onReset}>
                        <RollbackOutlined />返回
                    </Button>
                </div>
            </div>
            {/* 分割线*/}
            <Divider />
            <h4>基本信息</h4>
            {/* 输入框 */}
            <Form
                {...layout}
                form={form}
                name="control-hooks"
                onFinish={onFinish}

            >
                <Form.Item name="packType" style={{ width: 340 }} label="表单类型：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择内容"
                        allowClear
                    >
                        <Option value="黄金首饰">黄金首饰</Option>

                    </Select>
                </Form.Item>
                <Form.Item name="packCode" style={{ width: 340 }} label="条码" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="packDepartment" style={{ width: 340 }} label="仓库：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择内容"
                        allowClear
                    >
                        <Option value="黄金首饰A仓库">黄金首饰A仓库</Option>
                        <Option value="黄金首饰B仓库">黄金首饰B仓库</Option>

                    </Select>
                </Form.Item>
                <Form.Item name="packCustomer" style={{ width: 340 }} label="客户：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择内容"
                        allowClear
                    >
                        <Option value="美和珠宝">美和珠宝</Option>

                    </Select>
                </Form.Item>
                <Form.Item name="packWaybill" style={{ width: 340 }} label="打包单号：" >
                    <Input />
                </Form.Item>
                <Form.Item name="packNum" style={{ width: 340 }} label="数量" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="packWeight" style={{ width: 340 }} label="重量" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="packCost" style={{ width: 340 }} label="附加供奉" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="packColor" style={{ width: 340 }} label="成色：" rules={[{ required: true, message: '请输入内容!' }]} >
                    <Select
                        placeholder="请选择内容"
                        allowClear
                    >
                        <Option value="千足金9999">千足金9999</Option>
                        <Option value="千足金9998">千足金9998</Option>
                        <Option value="千足金9997">千足金9997</Option>

                    </Select>
                </Form.Item>
                <div className="table">
                    <h4>产品信息</h4>
                    <div className="right">
                        <Button type="primary" className='btn_pack'>打包</Button>
                        <Button type="primary" htmlType="submit"><PlusOutlined />添加</Button>
                    </div>
                </div>
            </Form>

            <CustomTable data={newData} columns={clumns} />

            {/* 打包信息 */}
            <div className="pack_info">
                <h4>打包信息</h4>
            </div>
            <CustomTable data={newProlist} columns={columns2} />

            <Modal title="标签" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <hr />
                <h5 >打包单</h5>
                <div className="pack_modal">
                    <p>单号：<span>11221</span></p>
                    <p>表单类型：销售表单</p>
                    <p>条码：1234567</p>
                    <p>产品名称：美和珠宝</p>
                    <p>成色：千足金9999</p>
                    <p>重量：2345</p>
                    <p>数量：12</p>
                    <p>附加工费：34</p>

                </div>
                <hr />
            </Modal>
        </div>
    );
};

export default AddPack;